<template>
  <el-container style="height:100%;">
    <el-container>
      <el-aside>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据分层</span> 
            </div>
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              highlight-current
              ref="tree"
              @node-click="handelrNodeClick"
            >
            </el-tree>
          </el-card>
        </el-main>
      </el-aside>
      <el-main>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%;"
          border
          v-loading="loading"
          highlight-current-row
          @current-change="handleChange"
          element-loading-text="数据加载中。。。"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" v-if="false" label="主键" width="0"></el-table-column>
          <el-table-column prop="tableName" :label="$t('development.name')" ></el-table-column>
          <el-table-column prop="aliasName" :label="$t('development.type')" ></el-table-column>
          <el-table-column :label="$t('base.action')">
            <template slot-scope="scope">
              <el-button
                v-if="tableData[scope.$index].select"
                size="mini"
                icon="el-icon-check"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </el-main>
    </el-container>
    <el-footer>
      <div style="float:right;">
      <el-button type="primary" @click="last">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
      <el-button @click="resetForm">取消</el-button>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  props:{
    stepNumber:Object
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.loadTreeData();
    this.selectTableByApiId();
  },
  methods: {
    handelrNodeClick(data){
      debugger;
      if(data.type=="domain"){
        this.requestGridData(data.id)
      }else{
        this.tableData=[];
      }
    },
    selectTableByApiId(){
      var _this = this;
      debugger;
      this.axios
        .post(this.HOST+"/apiTable/findByApiId", {
          apiId: _this.stepNumber.dataApi.id
        })
        .then(function(res) {
          if(res.data.success){
            _this.selectrow = res.data.data;
            _this.requestGridData(res.data.data.domainId)
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleChange(newVal,oldVal){
      newVal['select']=true;
      if(oldVal != null){
        oldVal['select']=false;
      }
      this.selectrow = newVal;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.requestGridData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestGridData();
    },
    last(){
      this.stepNumber.active--;
    },
    next(){
      let _this = this;
      debugger;
      this.axios
        .post(this.HOST+"/apiTable/create",
          {
            apiId:_this.stepNumber.dataApi.id,
            tableId:_this.selectrow.id
          })
          .then(function(res) {
            _this.stepNumber.active++;
            _this.stepNumber["title"]=_this.selectrow.layerName+"/"+_this.selectrow.domainName+"/"+_this.selectrow.tableName;
          })
          .catch(function(err) {
            console.log(err);
          });
    },
    resetForm() {
      this.$router.push("/");
    },
    reload() {
      this.formName = "";
      this.loadTreeData();
    },
    addLayer() {
      this.layerId = null;
      this.formName = "layer";
    },
    add(node, data) {
      this.domainId = null;
      this.domainPinfo = {
        name: data.name,
        domainId: data.type == "layer" ? null : data.id,
        layerId: data.type == "layer" ? data.id : null
      };
      this.formName = "domain";
    },
    edit(node, data) {
      if (data.type == "layer") {
        this.layerId = data.id;
        this.formName = "layer";
      } else {
        this.domainId = data.id;
        this.domainPinfo = {
          name: node.parent.data.name
        };
        this.formName = "domain";
      }
    },
    del(node, data) {
      this.deleteTreeItem(data.id, data.type);
    },
    deleteTreeItem(id, type) {
      let _this = this;
      this.axios
        .post(this.HOST + "/" + type + "/delete", {
          id: id
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
          } else {
            _this.reload();
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    loadTreeData() {
      let _this = this;
      this.axios
        .post(this.HOST+"/directory/layer/tree")
        .then(function(res) {
          _this.data = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    requestGridData(id) {
      var _this = this;
      this.axios
        .post(this.HOST+"/api/manager/model/findByPage", {
          pageNum: _this.currentPage,
          pageSize: _this.pagesize,
          domainId: id,
          name:'',
          dataSourceId:0
        })
        .then(function(res) {
          debugger;
          res = res.data;
          if (res.status == 1) {
            if(_this.selectrow != null){
              for(let i = 0 ; i < res.data.data.length ; i++){
                if(res.data.data[i].id == _this.selectrow.id){
                  res.data.data[i]["select"] = true;
                  _this.selectrow = res.data.data[i];
                }else{
                  res.data.data[i]["select"] = false;
                }
              }
            }
            _this.tableData = res.data.data;
            _this.total = res.data.total;
          } else {
            console.log(res.stackmessage);
          }
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
  },

  data() {
    return {
      tableData: [{
        tableName:'表1',
        aliasName:'CRM',
        select:true
      },
      {
        tableName:'表2',
        aliasName:'CRM',
        select:false
      }],
      currentPage: 1,
      pagesize: 10,
      total: 500,
      selectrow:null,
      loading: false,
      formName: "",
      layerId: null,
      domainId: null,
      domainPinfo: {},
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
</style>
